<script setup lang="ts">
import { reactive, ref,onMounted,watch,nextTick } from "vue";
import { usePermissionStore } from "@/store/modules/permission"
import { useSearchItem } from "./useSearchBar";
import { useRouter } from "vue-router"
interface OptionsType {
  item:OptionsItemType
  refIndex:number
}
type OptionsItemType = {
  path:string
  title:string[]
}
let { fuseInit,generateRoutes,fuse } = useSearchItem()

const searchVal = ref("");
const isShowSearch = ref(false);
const options = ref<OptionsType[]>([]);
const searchPool = ref()
const headerSearchSelect = ref<HTMLInputElement | null>(null)


const permissionStore = usePermissionStore()
const router = useRouter()

 const authRoute = permissionStore.dynamicRoutes
// 检索的数据
const query = (queryVal:string):void => {
    if (queryVal !== '') {
      options.value = fuse.value.search(queryVal)
    } else {
      options.value = []
    }
};
//
//
const handleSearch = ()=>{
    isShowSearch.value = true
    setTimeout(()=>{
        headerSearchSelect.value?.focus()
    },20)
}
// 选中的菜单项
const change = (val:string)=>{
    if (val) {
      router.push({
        path: val,
      })
    }
    options.value = []
    searchVal.value = ''
    isShowSearch.value = false
}
onMounted(()=>{
    searchPool.value = generateRoutes(authRoute)
})
watch(searchPool, (list) => {
    fuseInit(list)
  })

</script>
<template>
  <div ref="searchBarWrapper" class="searchBarWrapper">
    <!-- 显示的图标 -->
    <svg-icon name="search" @click="handleSearch"></svg-icon>

    <div class="dialog-warper"></div>
      <!-- 需要 展示的输入框 -->
      <el-dialog
        v-model="isShowSearch"
        class="searchMenu_dialog"
        width="600px"
        destroy-on-close
        :show-close="false"
        append-to-body
        lock-scroll
      >
      
        <el-select
          style="width: 100%"
          ref="headerSearchSelect"
          v-model="searchVal"
          :remote-method="query"
          filterable
          default-first-option
          remote
          placeholder="菜单搜索 ：支持菜单名称、路径"
          class="header_search_select"
          
          @change="change"
        >
        <template #prefix>
          <span style="line-height: 48px;font-size: 18px; color: #409eff;">
            <svg-icon name="search" color="#409eff"></svg-icon>
          </span>
        </template>
          <el-option
            v-for="item in options"
            :key="item.item.path"
            :value="item.item.path"
            :label="
              item.item &&
              item.item.title &&
              item.item.title.length &&
              item.item.title.join(' > ')
            "
          >
            <span>{{  item.item &&  item.item.title && item.item.title.length &&  item.item.title.join(' > ') }}</span>
          </el-option>
        </el-select>
      </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.searchBarWrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .header_search_select {
    height: 50px;
    :deep(.el-input__wrapper) {
      height: 50px;
      border: none;
    }
  }
}

.searchMenu_dialog {
  :deep(.el-dialog__header) {
      display: none !important;
    }
}

.svg-icon {
  font-size: 20px;
  &:focus {
    outline: none;
  }
}
</style>


